<template>

<div id="AgentInfo">
  <el-row>
    <mu-appbar title="个人信息" style="background-color:#409EFF">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'AgentInfoMenu' }"/>
    </mu-appbar>
  </el-row>
  <el-row>

  </el-row>

  <div class= "tools" v-show="tools">
      <el-row>
        <el-col :xs="6" :sm="4" :md="3" :lg="3">
          代理ID
        </el-col>
        <el-col :xs="18" :sm="20" :md="21" :lg="21">
          <el-input v-model="condition.uid" size="mini" @blur="getAgents"></el-input>
        </el-col>
      </el-row>

      <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8">
        <el-col :xs="6" :sm="6" :md="6" :lg="6">
          起始日期
        </el-col>
        <el-col :xs="18" :sm="18" :md="18" :lg="18">
          <el-date-picker
            v-model="condition.startDay"
            type="date"
            placeholder="选择起始日期"
            size="mini"
            value-format="yyyy-MM-dd"
            @change="getAgents">
          </el-date-picker>
        </el-col>
      </el-col>

      <el-col :xs="24" :sm="8" :md="8" :lg="8">
        <el-col :xs="6" :sm="6" :md="6" :lg="6">
          结束日期
        </el-col>
        <el-col :xs="18" :sm="18" :md="18" :lg="18">
          <el-date-picker
            v-model="condition.endDay"
            type="date"
            placeholder="选择结束日期"
            size="mini"
            value-format="yyyy-MM-dd"
            @change="getAgents">
          </el-date-picker>
        </el-col>
      </el-col> -->

  </div>

  <el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="mini">
      <el-table-column
        prop="agentUid"
        label="代理ID">
      </el-table-column>
      <el-table-column
        prop="binderUid"
        label="上级ID">
      </el-table-column>
      <!-- <el-table-column
        v-if="!this.isAgent"
        prop="organizer"
        label="顶级ID">
      </el-table-column>
      <el-table-column
        v-if="!this.isAgent"
        prop="agentLevel"
        label="代理级别">
        <template slot-scope="scope">
          <span v-if="scope.row.agentLevel === 1">二级代理</span>
          <span v-if="scope.row.agentLevel === 2">一级代理</span>
          <span v-if="scope.row.agentLevel === 3">总代理</span>
          <span v-if="scope.row.agentLevel === 4">运营商</span>
          <span v-if="scope.row.agentLevel === 6">白户</span>
          <span v-if="scope.row.agentLevel === 5">官方</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="wechat"
        label="Line账号">
      </el-table-column>
      <el-table-column
        prop="realName"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="授权时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click='handleGetPassword(scope.row.agentUid)'>查询密码</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click='handleUpdatePassword(scope.row.agentUid)'>修改密码</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <el-row>
    <center>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="condition.total"
        :page-size="condition.pageSize"
        :current-page="condition.currentPage"
        @current-change="handleCurrentChange">
      </el-pagination>
    </center>
  </el-row>

  <el-dialog title="查询密码" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="账号">
        <el-input v-model="form.account" readonly=true size="mini"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" readonly=true size="mini"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleLogin">跳 转</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改密码" :visible.sync="dialogFormVisibleUpdate">
    <el-form :model="formUpdate">
      <el-form-item label="账号">
        <el-input v-model="formUpdate.account" readonly=true size="mini"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formUpdate.password" readonly=true size="mini"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="formUpdate.newPassword"  size="mini"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
      <el-button type="primary" @click="submitUpdate">修 改</el-button>
    </div>
  </el-dialog>

</div>

</template>

<style>
#AgentInfo  .el-row {
    margin-bottom: 16px;
  }
#AgentInfo  .el-col {
    margin-bottom: 8px;
  }
#AgentInfo  .el-dialog {
    width: 70%
  }
</style>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        tools: true,
        newAgent: 0,
        totalAgent: 0,
        tableData: [

        ],
        condition: {
          startDay: '',
          endDay: '',
          uid: '',
          currentPage: 1,
          pageSize: 10,
          total: 0,
          account: sessionStorage.getItem('account')
        },
        form: {
          account: '',
          password: '',
          auto: 1
        },
        formUpdate: {
          account: '',
          password: '',
          newPassword: ''
        },
        isAgent: false,
        dialogFormVisible: false,
        dialogFormVisibleUpdate: false
      }
    },
    methods: {
      handleTools () {
        if (this.tools) {
          this.tools = false
        } else {
          this.tools = true
        }
      },
      getAgents () {
        let that = this
        if (this.condition.uid === '' || this.condition.uid.length === 0) {
          this.condition.uid = -1
        }
        this.$axios({
          method: 'get',
          url: '/api/AgentService.getAgents',
          params: this.condition
        })
        .then(function (resp) {
          that.initCondition()
          for (let item in resp.data.data) {
            resp.data.data[item].createTime = moment.utc(resp.data.data[item].createTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
          }
          that.tableData = resp.data.data
          that.condition.total = resp.data.page.total
        })
      },
      init () {
        this.getAgents()
      },
      handleCurrentChange (val) {
        this.condition.currentPage = val
        this.getAgents()
      },
      initCondition () {
        this.condition.uid = ''
      },
      handleGetPassword (agentUid) {
        let that = this
        this.dialogFormVisible = true
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.getPassword',
          params: {'account': sessionStorage.getItem('account'), 'agentUid': agentUid}
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.form = resp.data.data
            that.form.auto = 1
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'Warning'
            })
          }
        })
      },
      handleUpdatePassword (agentUid) {
        let that = this
        this.dialogFormVisibleUpdate = true
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.getPassword',
          params: {'account': sessionStorage.getItem('account'), 'agentUid': agentUid}
        })
        .then(function (resp) {
          that.formUpdate = resp.data.data
        })
      },
      submitUpdate () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AuthService.updatePassword',
          params: this.formUpdate
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.dialogFormVisibleUpdate = false
            that.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'Warning'
            })
          }
        })
      },
      handleLogin () {
        if (this.form.account.length === 0 || this.form.account === '' || this.form.password.length === 0 || this.form.password === '') {
          this.$message({
            message: '请完善信息',
            type: 'error'
          })
          return false
        }
        // window.open('http://192.168.1.69:3208/index.html?account=' + this.form.account + '&password=' + this.form.password + '&auto=1' ,'_blank')
        this.$router.push({name: 'Login', params: this.form})
      }
    },
    mounted () {
      if (sessionStorage.getItem('role') === 'agent') {
        this.isAgent = true
      }
      this.init()
    }
  }
</script>
